<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../lib/vue.js"></script>
    <title>Document</title>
</head>
<body>
        <div id="container">
                <p v-text="msg"></p>
                <button v-on:click="handleClick">单击按钮</button>
                <button @click="handleClick">单击按钮</button>
                <h5>选择爱好</h5>
                <select v-on:change="handleChange">
                    <option value="red">瑜伽</option>
                    <option value="green">跑步</option>
                    <option value="pink">读书</option>
                </select>
                <h5>表单提交</h5>
                <form v-on:submit.prevent="handleSubmit">
                    <input type="checkbox"  v-on:click="handleDisabled"/>
                    是否同意本站协议
                    <br><br>
                    <button :disabled="isDisabled">提交</button>
                </form>
            </div>
</body>
<script>
    var vm=new Vue({
            el:"#container",
            data:{
                msg:"注册账户",
                isDisabled:true
            },
            methods:{
                handleClick:function(){
                    console.log("btn is clicked");
                },
                handleChange:function(event){
                    console.log("选择了某选项"+event.target.value);
                },
                handleSubmit:function(){
                    console.log("触发事件");
                },
                handleDisabled:function(event){
				    console.log(event.target.checked);
                    if(event.target.checked==true){
                        this.isDisabled = false;
                    }
                    else {
                        this.isDisabled = true;
                    }
                }
            }
        })
</script>
</html>